<template>
  <div>
       <header>
            <navigator open-type="switchTab" class="navigator" url="/pages/index/index">〈</navigator>
           <span>经纪人</span>
       </header>
       <main>
           <div class="ipt">
               <input type="text" placeholder="请输入要查询的经纪人" @change="changefilter">
           </div>
           <div class="imgs">
              <div class="imgs-top">
                        <img class="top" :src="list[0].url" alt="">
                        <img class="left" :src="list[1].url" alt="">
                        <img class='right' :src="list[2].url" alt="">
              </div>
              <div class="img"  v-for="item in agent"
                :key='item.id'>
                <div class="img-left">
                     <navigator><img @click="changeitem(item)" :src="item.url" alt=""></navigator>
                </div>
                <div class="img-right">
                    <button open-type="contact" bindcontact="handleContact">现在聊天</button>
                    <button  @click="changecall">经纪人电话</button>
                </div>
              </div>
           </div>
       </main>
  </div>
</template>
<script>
export default {
    data() {
        return {
            item:[
                {
                    id:0,
                    name:'陈家瑛',
                    url:'http://image109.360doc.com/DownloadImg/2020/04/1316/187983320_1_20200413041028619',
                    type:'陈家瑛带过三个艺人，第一位是陈百强，后来是王菲，王菲能在香港闯出一番天地，她功不可没，后来王菲淡出后，就签了陈奕迅。虽然她带的艺人不多，但个个都算是家喻户晓的大明星。她和艺人的关系也很亲密，艺人直接称呼她为“阿妈”',
                },{
                    id:1,
                    name:'陈淑芬',
                    url:'http://image109.360doc.com/DownloadImg/2020/04/1316/187983320_2_20200413041028807',
                    type:'依然是香港的金牌经纪人，带过张国荣，张学友，周华健，梅艳芳等等。这些明星都可以算是天王天后的巨星。香港娱乐圈称呼她为“陈太”。她不但是艺人的经纪人，也是好朋友，更是在这些艺人心中的地位更是举足轻重'
                },{
                    id:2,
                    name:'李雪',
                    url:'http://image109.360doc.com/DownloadImg/2020/04/1316/187983320_8_20200413041029635',
                    type:'李冰冰今日能成为国际巨星，她妹妹李雪是最大的功臣。曾经是华谊兄弟联席总经理，可以想到当时的李冰冰的资源一般明星也只能望其项背，她更是李冰冰坚强的后盾和强大的精神支柱，没有她，就没有今日的李冰冰'
                },{
                    id:3,
                    name:'邱黎宽',
                    url:'http://image109.360doc.com/DownloadImg/2020/04/1316/187983320_3_2020041304102926',
                    type:'有着“巨星推手”称号的邱黎宽，在圈内更是被尊称为“宽姐”。那英，王菲都曾被她捧红过。林志玲更是称呼她为恩人，对她有求必应。江湖谣传背景非同一般，收养了因跳楼逝世三级片女星陈宝莲的儿子。自身不但是经纪人还是制片人'
                },{
                    id:4,
                    name:'霍汶希',
                    url:'http://image109.360doc.com/DownloadImg/2020/04/1316/187983320_4_20200413041029119',
                    type:'有着香港最后一位金牌经纪人之称的霍汶希，曾捧红过twins，容祖儿，谢霆锋等等艺人。艳照门后阿娇的复出她功不可没，她本人的外形也非常美丽，还出过书，监制过电影，现在是一位了不起的单身妈妈',
                },{
                    id:5,
                    name:'王京花',
                    url:'http://image109.360doc.com/DownloadImg/2020/04/1316/187983320_5_20200413041029307',
                    type:'有着中国第一代文化经纪人之称的王京花，曾捧红过胡军，刘嘉玲，陈道明等等大牌明星。她是经济人行业中的大姐大，更是对艺人最细心，最贴心的保姆，她还有独到的眼光，很多内陆经纪人都是她培养出来'
                },{
                    id:6,
                    name:'李小婉',
                    url:'http://image109.360doc.com/DownloadImg/2020/04/1316/187983320_6_20200413041029448',
                    type:'内陆金牌制作人，也是荣信达影视公司的创始人，出品过《大明宫词》《人间四月天》《橘子红了》《新红楼梦》等多部影视作品，陈坤，周迅，杨洋，李沁等等明星都曾是旗下艺人。她和导演李少红的友谊更是多年的好朋友，好搭档'
                },{
                    id:7,
                    name:'常继红',
                    url:'http://image109.360doc.com/DownloadImg/2020/04/1316/187983320_7_20200413041029541',
                    type:'内陆的金牌经纪人常继红，曾捧红蒋雯丽，刘烨，于娜，孙俪，等等大牌明星，曾与多次获得“金鹰奖”“飞天奖”等国内知名奖项的海润影视公司合作长达十年之久。她不但是造星大师，更是艺人经历挫折，内心脆弱时倾述的对象'
                }
            ],
            list:[{
                    id:0,
                    name:'陈家瑛',
                    url:'http://image109.360doc.com/DownloadImg/2020/04/1316/187983320_1_20200413041028619',
                    type:'陈家瑛带过三个艺人，第一位是陈百强，后来是王菲，王菲能在香港闯出一番天地，她功不可没，后来王菲淡出后，就签了陈奕迅。虽然她带的艺人不多，但个个都算是家喻户晓的大明星。她和艺人的关系也很亲密，艺人直接称呼她为“阿妈”',
                },{
                    id:1,
                    name:'陈淑芬',
                    url:'http://image109.360doc.com/DownloadImg/2020/04/1316/187983320_2_20200413041028807',
                    type:'依然是香港的金牌经纪人，带过张国荣，张学友，周华健，梅艳芳等等。这些明星都可以算是天王天后的巨星。香港娱乐圈称呼她为“陈太”。她不但是艺人的经纪人，也是好朋友，更是在这些艺人心中的地位更是举足轻重'
                },{
                    id:2,
                    name:'李雪',
                    url:'http://image109.360doc.com/DownloadImg/2020/04/1316/187983320_8_20200413041029635',
                    type:'李冰冰今日能成为国际巨星，她妹妹李雪是最大的功臣。曾经是华谊兄弟联席总经理，可以想到当时的李冰冰的资源一般明星也只能望其项背，她更是李冰冰坚强的后盾和强大的精神支柱，没有她，就没有今日的李冰冰'
                },],
                 agent:[
                {
                    id:0,
                    name:'陈家瑛',
                    url:'http://image109.360doc.com/DownloadImg/2020/04/1316/187983320_1_20200413041028619',
                    type:'陈家瑛带过三个艺人，第一位是陈百强，后来是王菲，王菲能在香港闯出一番天地，她功不可没，后来王菲淡出后，就签了陈奕迅。虽然她带的艺人不多，但个个都算是家喻户晓的大明星。她和艺人的关系也很亲密，艺人直接称呼她为“阿妈”',
                },{
                    id:1,
                    name:'陈淑芬',
                    url:'http://image109.360doc.com/DownloadImg/2020/04/1316/187983320_2_20200413041028807',
                    type:'依然是香港的金牌经纪人，带过张国荣，张学友，周华健，梅艳芳等等。这些明星都可以算是天王天后的巨星。香港娱乐圈称呼她为“陈太”。她不但是艺人的经纪人，也是好朋友，更是在这些艺人心中的地位更是举足轻重'
                },{
                    id:2,
                    name:'李雪',
                    url:'http://image109.360doc.com/DownloadImg/2020/04/1316/187983320_8_20200413041029635',
                    type:'李冰冰今日能成为国际巨星，她妹妹李雪是最大的功臣。曾经是华谊兄弟联席总经理，可以想到当时的李冰冰的资源一般明星也只能望其项背，她更是李冰冰坚强的后盾和强大的精神支柱，没有她，就没有今日的李冰冰'
                },{
                    id:3,
                    name:'邱黎宽',
                    url:'http://image109.360doc.com/DownloadImg/2020/04/1316/187983320_3_2020041304102926',
                    type:'有着“巨星推手”称号的邱黎宽，在圈内更是被尊称为“宽姐”。那英，王菲都曾被她捧红过。林志玲更是称呼她为恩人，对她有求必应。江湖谣传背景非同一般，收养了因跳楼逝世三级片女星陈宝莲的儿子。自身不但是经纪人还是制片人'
                },{
                    id:4,
                    name:'霍汶希',
                    url:'http://image109.360doc.com/DownloadImg/2020/04/1316/187983320_4_20200413041029119',
                    type:'有着香港最后一位金牌经纪人之称的霍汶希，曾捧红过twins，容祖儿，谢霆锋等等艺人。艳照门后阿娇的复出她功不可没，她本人的外形也非常美丽，还出过书，监制过电影，现在是一位了不起的单身妈妈',
                },{
                    id:5,
                    name:'王京花',
                    url:'http://image109.360doc.com/DownloadImg/2020/04/1316/187983320_5_20200413041029307',
                    type:'有着中国第一代文化经纪人之称的王京花，曾捧红过胡军，刘嘉玲，陈道明等等大牌明星。她是经济人行业中的大姐大，更是对艺人最细心，最贴心的保姆，她还有独到的眼光，很多内陆经纪人都是她培养出来'
                },{
                    id:6,
                    name:'李小婉',
                    url:'http://image109.360doc.com/DownloadImg/2020/04/1316/187983320_6_20200413041029448',
                    type:'内陆金牌制作人，也是荣信达影视公司的创始人，出品过《大明宫词》《人间四月天》《橘子红了》《新红楼梦》等多部影视作品，陈坤，周迅，杨洋，李沁等等明星都曾是旗下艺人。她和导演李少红的友谊更是多年的好朋友，好搭档'
                },{
                    id:7,
                    name:'常继红',
                    url:'http://image109.360doc.com/DownloadImg/2020/04/1316/187983320_7_20200413041029541',
                    type:'内陆的金牌经纪人常继红，曾捧红蒋雯丽，刘烨，于娜，孙俪，等等大牌明星，曾与多次获得“金鹰奖”“飞天奖”等国内知名奖项的海润影视公司合作长达十年之久。她不但是造星大师，更是艺人经历挫折，内心脆弱时倾述的对象'
                }
            ],
        }
    },
    methods:{
        goback(){
           wx.navigateTo({
               url:'/pages/index/index'
           })
        },
        changeitem(item){
            wx.navigateTo({
               url:`/pages/agent/delect/index?id=${item.id}`
           })
        },
        changecall(){
            wx.makePhoneCall({
                phoneNumber: '139白酒啤酒葡萄酒' //仅为示例，并非真实的电话号码
                })
        },
    handleContact (e) {
        console.log(e.detail.path)
        console.log(e.detail.query)
        },
    changefilter(e){
            if(e.detail.value){
                this.agent=this.agent.filter(item=>item.name.includes(e.detail.value))
            }else{
               this.agent=this.item
            }
        }    
    }
}
</script>

<style lang='scss'>
header{
    width: 100%;
    height: 160rpx;
    background: linear-gradient(to right,#0000FF,#1E90FF);
    display: flex;
    .navigator{
        width: 30%;
        height: 60rpx;
        text-align: center;
        line-height: 60rpx;
         padding-top:50rpx;
         font-size: 30rpx;
         color: white;
    }
    span{
        flex: 1;
        height: 60rpx;
        padding-top:50rpx;
        padding-left: 90rpx;
        line-height: 60rpx;
        font-size: 30rpx;
         color: white;
    }
}
.ipt{
    width: 90%;
    height: 60rpx;
    margin:0 auto;
    margin-top: 20rpx;
    input{
        width: 100%;
        border: 1px solid;
    }
}
.imgs{
     width: 90%;
    height: 400rpx;
    margin:0 auto;
}
.imgs-top{
    display: flex;
    margin: 40rpx 0;
    .top{
        flex: 1;
        width: 30%;
        height: 400rpx;
        margin-top: 40rpx;
    }
    .left{
         flex: 1;
        width: 30%;
        height: 400rpx;
    }
    .right{
         flex: 1;
        width: 30%;
        height: 400rpx;
          margin-top: 40rpx;
    }
}
.img{
    display: flex;
    margin-top: 40rpx;
    .img-left{
        img{
           width: 400rpx;
            height: 200rpx;
        }
    }
    .img-right{
        width: 40%;
        display: flex;
        flex-direction: column;
        button{
             height: 50%;
          flex: 1;
          text-align: center;
           background: orange;
           line-height: 100rpx;
        }
      navigator{
          height: 50%;
          flex: 1;
          text-align: center;
           background: orange;
           line-height: 100rpx;
      }
    }
}
</style>
